<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		html,body{
			height:100%;
		}
		body{
			overflow-x:hidden ;
		}
		#box{
			position:absolute;
			right:-250px;
			width:253px;
			height:100%;
			background:gray;
		}
		#box1{
			position:absolute;
			left:-37px;
			top:0;
			width:37px;
			height:150px;
			background: red;
			cursor: pointer;
		}
		#d1{
			position: absolute;
			left:-30px;
			top:50%;
			margin-top: -110px;
			width:34px;
			height:220px;
			
		}
		#d1 li{
			background: gray;
			margin-bottom: 1px;
			width:30px;
			height:30px;
			text-align: center;
			line-height: 30px;
		}
		#d2{
			position: absolute;
			left:-30px;
			bottom:0;
			width:34px;
			height:70px;
		}
		#d2 li{
			width:30px;
			height:30px;
			margin-bottom: 1px;
			background: gray;
			text-align: center;
			line-height: 30px;
		}
		ul,ol{
			list-style-type: none;
		}

	</style>
	<script type="text/javascript" src="js/mycool.js" ></script>
 	<script src="js/move.js"></script>
	<script src="jquery-1.8.3.js"></script>

	<script>
/*
$(function(){
	$("#box1").toggle(
		function(){
			$('#box').animate({right:0},500);
		},
		function(){
			$('#box').animate({right:-250},500);
		}


		)
})*/

	window.onload=function(){
		var oBox = document.getElementById("box"),
			onOff = true,
			oBox1 = document.getElementById("box1");
		oBox1.onclick = function(){
			if(onOff){
				startMove(oBox,{"right":0});
				onOff = false;
			}else{
				startMove(oBox,{"right":-250});
				onOff = true;
			}
			
		}
	}

	</script>
</head>
<body style="height:5000px">
	<div id="box">
		<div id="box1">红包红包飞吧</div>

		<ul id="d1">
			<li><img src="img/1.png" alt=""></li>
			<li><img src="img/5.png" alt=""></li>
			<li><img src="img/3.png" alt=""></li>
			<li><img src="img/4.png" alt=""></li>
			<li><img src="img/2.png" alt=""></li>
			<li><img src="img/6.png" alt=""></li>
		</ul>

		<ul id="d2">
			<li>^</li>
			<li>---</li>
		</ul>
		
	</div>
	
</body>
</html>